<template>
  <div class="container my-5">
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light mb-4">
      <div class="container-fluid">
        <a class="navbar-brand" href="#" style="font-size: 2.4rem; font-weight: 3000;">TodoList</a>
      </div>
      <div class="d-flex ms-auto">
          <a 
            href="https://gitee.com/liu-meixi_0/status-management---pinia.git" 
            target="_blank" 
            class="navbar-text text-primary me-3"
            style="font-size: 2.0rem; font-weight: 100;" 
          >
            <i class="fa fa-github me-1"></i> 代码仓库
          </a>
        </div>
    </nav>

       <!-- 测试截图（修改为左右布局） -->
    <div class="card mb-5">
      <div class="card-header bg-info text-white">
        <h4 class="card-title">自动化测试截图</h4>
      </div>
      <div class="card-body d-flex flex-row"> <!-- 新增flex布局 -->
        <!-- 左侧文字 -->
        <div class="d-flex align-items-center justify-content-center" style="width: 50%;">
          <span style="font-size: 24px;">我添加组件的单元测试,对新增一条TODO项目和删除一条TODO项目进行测试,
            以验证新增和删除是否成功,并将测试代码和测试结果的截图(将两张截图合并到一张jpg图中),
            保存备交。</span>
        </div>
        <!-- 右侧图片 -->
        <div class="text-center flex-grow-1">
          <!-- TodoList.vue 或其他组件中 -->
<img 
  src="@/assets/one.png" 
  alt="测试截图" 
  class="img-fluid rounded"
  style="max-height: 300px;"
>
        </div>
      </div>
    </div>

    <!-- 待办列表 -->
    <div class="card">
      <div class="card-header bg-secondary text-white">
        <h4 class="card-title">我的待办事项</h4>
      </div>
      <div class="card-body">
        <!-- 添加待办 -->
        <div class="input-group mb-4">
          <input 
            type="text" 
            class="form-control" 
            v-model="newTodo" 
            placeholder="添加新待办事项..."
            @keyup.enter="addTodo"
          >
          <button class="btn btn-success" @click="addTodo">
            <i class="fa fa-plus"></i> 添加
          </button>
        </div>

        <!-- 待办列表 -->
        <ul class="list-group">
          <li 
            v-for="(todo, index) in todos" 
            :key="index" 
            class="list-group-item d-flex justify-content-between align-items-center"
          >
            <div class="form-check">
              <input 
                type="checkbox" 
                class="form-check-input" 
                v-model="todo.completed"
                @change="saveTodos"
              >
              <label 
                class="form-check-label ms-2" 
                :class="{ 'text-decoration-line-through text-muted': todo.completed }"
              >
                {{ todo.text }}
              </label>
            </div>
            <button class="btn btn-danger btn-sm" @click="deleteTodo(index)">
              <i class="fa fa-trash"></i>
            </button>
          </li>
        </ul>

        <!-- 统计信息 -->
        <div class="mt-4 text-right">
          <span class="text-muted">
            已完成: {{ completedCount }} / 总计: {{ todos.length }}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useUserStore } from '@/stores/user'
import { useRouter } from 'vue-router'

const userStore = useUserStore()
const router = useRouter()

// 待办数据
const todos = ref(JSON.parse(localStorage.getItem('todos') || '[]'))
const newTodo = ref('')

// 计算已完成数量
const completedCount = computed(() => {
  return todos.value.filter(todo => todo.completed).length
})

// 生命周期钩子：初始化用户状态
onMounted(() => {
  userStore.initUser()
  if (!userStore.isLoggedIn) {
    router.push('/')
  }
})

// 添加待办
const addTodo = () => {
  if (newTodo.value.trim()) {
    todos.value.push({
      text: newTodo.value,
      completed: false,
      createdAt: new Date().toISOString()
    })
    newTodo.value = ''
    saveTodos()
  }
}

// 删除待办
const deleteTodo = (index) => {
  if (confirm('确定删除此待办？')) {
    todos.value.splice(index, 1)
    saveTodos()
  }
}

// 保存到本地存储
const saveTodos = () => {
  localStorage.setItem('todos', JSON.stringify(todos.value))
}

// 退出登录
const logout = () => {
  userStore.logout()
  router.push('/')
}
</script>